<template>
  <div>
    <div id="content" class="content_hello">
      <div class="shuRu">
        <div class="componyName">幸福仓</div>
        <div class="title">欢迎您成为我们的骑手！</div>
        <div class="ruleWrap">
          <div v-if="inputValue">
            <div class="phone">
              <el-input v-model="ruleForm.personnelPhone" :prefix-icon="Cellphone" placeholder='请输入手机号'
                autocomplete="off" />
            </div>
            <div class="name">
              <el-input :prefix-icon="UserFilled" v-model="ruleForm.personnelName" placeholder='请输入姓名'
                autocomplete="off" />
            </div>
            <div class="sub">
              <el-button class="submit" type="primary" @click="submitForm()">
                提交
              </el-button>
            </div>
          </div>

          <div v-else>
            <img src="../assets/success.png" alt="">
            <div class="shen">已申请，待审核！</div>
            <div class="sub">
              <el-button class="submit" type="primary" @click="reFlash()">
                刷新
              </el-button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script lang="ts" setup>
import { Cellphone, UserFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { submitData } from '../api/com'
// merId 
const queryString = ref("");
const inputValue = ref(true)
onMounted(() => {
  queryString.value = window.location.href.split("=")[1];
  console.log(queryString.value,'接收到的MerId')
})

const checkPhone = () => {
  var phone = ruleForm.personnelPhone;
  var phoneRegex = /^1(3|4|5|7|8)\d{9}$/
  if (!(phoneRegex.test(phone))) {
    ElMessage.error("手机号码有误，请重填")
    return false;
  }
}

let ruleForm = reactive({
  personnelName: '',
  personnelPhone: '',
})


const reFlash = () => {
  inputValue.value = true
}

const submitForm = () => {
  let data = {
    personnelPhone: ruleForm.personnelPhone,
    personnelName: ruleForm.personnelName,
    merId: queryString.value
  }
  if (!ruleForm.personnelName) {
    ElMessage.error('请输入姓名！')
  }




  checkPhone()
  submitData(data).then(res => {

    if (res.code == 200) {
      ElMessage({
        message: '已申请，待审核！',
        type: 'success',
      })
      inputValue.value = false
    } else {
      ElMessage.error(res.message)
    }
    ruleForm.personnelPhone='';
    ruleForm.personnelName='';
  }).catch(err=>{
    ElMessage.error(err);
    ruleForm.personnelPhone='';
    ruleForm.personnelName='';

    
  })
}
</script>
<style>
.el-input {
  height: 38px;
  border-radius: 20px;
}

.shen {
  margin: 20px 0;
}

.el-input__wrapper {
  height: 38px;
  border-radius: 20px;
}
</style>
<style lang="scss" scoped>
.content_hello {
  background-color: #8a8ef5;
  padding: 2.5rem;
  padding-top: 100px;
  position: relative;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
}

.componyName {
  font-size: 30px;
  color: #fff;
  position: relative;
  margin-bottom: 20px;

}

.phone {
  margin-bottom: 30px;
}

.name {
  margin-bottom: 30px;
}

.title {
  margin-bottom: 60px;
  color: #ccc;
}

.ruleWrap {
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 20px;
  padding-top: 50px;
}

.submit {
  width: 90%;
  border-radius: 20px;
  background-color: #8a8ef5;
  color: #fff;
}
</style>
